<template>
	<view>
		<view class="container" v-if="isShow">
			<u-navbar title="我的邀请" autoBack="true" leftIconSize="40" fixed="false" placeholder="true"
				:titleStyle="titleStyle" leftIcon="arrow-left">
				<!-- <view class="u-nav-slot" slot="right" @click="showPop">规则</view> -->
			</u-navbar>
			<!-- 头部 -->
			<view class="top-container">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view>
						<view style="color: white; font-size: 28rpx;">已获得佣金(元）</view>
						<view style="color: white; font-size: 36rpx; font-weight: 700; margin-top: 8rpx;">
							{{totalCommissionAmount ? totalCommissionAmount : 0}}</view>
					</view>
					<image style="height: 48rpx; width: 118rpx;" :src="getLevelImg()" v-if="level"></image>
				</view>
				<view
					style="margin-top: 28rpx; background-color: rgba(255, 255, 255, 0.28); display: flex; padding-top: 22rpx; padding-bottom: 22rpx; border-radius: 18rpx;">
					<view style="flex: 1; margin-left: 80rpx;">
						<view class="top-container-text">
							邀请人数
						</view>
						<view class="top-container-text" style="margin-top: 12rpx;">
							{{num}}
						</view>
					</view>
					<view style="flex: 1; margin-left: 30rpx;">
						<view class="top-container-text">
							累计核销(元）
						</view>
						<view class="top-container-text" style="margin-top: 12rpx;">
							{{totalFaceValue ? totalFaceValue : 0}}
						</view>
					</view>
				</view>
			</view>
			<!-- 筛选 -->
			<view class="filter-container">
				<view :class="['filter-text', authStatus != null && 'active']" @click="showStatusPopup()">
					<text>{{ getAuthStatusText()}}</text>
					<image style="height: 28rpx; width: 16rpx; margin-left: 8rpx;"
						src="/static/images/ic_invita_filter_up.png" v-if="!isShowStatusPopup"></image>
					<image style="height: 28rpx; width: 16rpx; margin-left: 8rpx;"
						src="/static/images/ic_invita_filter_down.png" v-else></image>
				</view>
				<view :class="" style="margin-left: 38rpx;" :class="['filter-text', priceFilter != 0 && 'active']"
					@click="changeFilter()">
					<text>佣金</text>
					<image style="height: 28rpx; width: 16rpx; margin-left: 8rpx;"
						src="/static/images/ic_invita_filter_no.png" v-if="priceFilter == 0"></image>
					<image style="height: 28rpx; width: 16rpx; margin-left: 8rpx;"
						src="/static/images/ic_invita_filter_up.png" v-if="priceFilter == 1"></image>
					<image style="height: 28rpx; width: 16rpx; margin-left: 8rpx;"
						src="/static/images/ic_invita_filter_down.png" v-if="priceFilter == 2"></image>
				</view>
			</view>

			<scroll-view scroll-y enable-back-to-top @scrolltolower="loadMore" @refresherrefresh="onRefresh"
				refresher-enabled :refresher-triggered="isRefreshing" style="height: 60%;">
				<block v-for="(item, gIndex) in invitaMember" :key="gIndex">
					<view class="member-container">
						<image style="height: 84rpx; width: 84rpx;" src="/static/images/ic_login_head.png"></image>
						<view style="margin-left: 30rpx; flex: 1;">
							<view style="display: flex; justify-content: space-between;">
								<view style="display: flex;">
									<view style="color: black; font-size: 28rpx;">{{item.nickName}}</view>
									<view v-if="item.isContract == 1"
										style="margin-left: 16rpx; padding: 2rpx 6rpx; color: #487AFF; border: 2rpx solid #487AFF; border-radius: 8rpx; font-size: 24rpx;">
										已认证</view>
									<view v-else
										style="margin-left: 16rpx; padding: 2rpx 6rpx; color: #FC3131; border: 2rpx solid #FC3131; border-radius: 8rpx; font-size: 24rpx;">
										未认证</view>
								</view>
								<view style="color: rgba(152, 152, 152, 0.80); font-size: 24rpx;">
									{{item.registerTime}}
								</view>
							</view>

							<view style="margin-top: 12rpx; color: black; font-size: 28rpx;">{{item.mobile}}</view>
							<view style="margin-top: 30rpx; display: flex;">
								<view style="flex: 1;">
									<view style="color: #6D6D6D; font-size: 24rpx;">累计核销(元）</view>
									<view style="color: black; font-size: 28rpx; margin-top: 8rpx; font-weight: 700;">
										{{item.totalFaceValue}}
									</view>
								</view>
								<view style="flex: 1;">
									<view style="color: #6D6D6D; font-size: 24rpx;">贡献佣金(元）</view>
									<view style="color: black; font-size: 28rpx; margin-top: 8rpx; font-weight: 700;">
										{{item.totalCommissionAmount}}
									</view>
								</view>

							</view>
						</view>
					</view>
				</block>
				<view v-if="loadingMore" class="loading-more">加载中...</view>
				<view v-if="noMoreData" class="no-more-data">已经全部加载完毕</view>
			</scroll-view>

			<u-popup :show="isShowStatusPopup" mode="bottom" round="20" @close="closeStatusPop()">
				<view class="popup-container">
					<view class="popup-header">
						<text class="title">选择状态</text>
						<image class="close" @click="closeStatusPop()" src="/static/images/ic_pop_close.png"></image>
					</view>

					<view style="display: flex;">
						<view class="card-item-container" @click="changeStatus(1)">
							已认证
						</view>
						<view class="card-item-container" style="margin-left: 40rpx;" @click="changeStatus(0)">
							未认证
						</view>
					</view>

				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad() {
			this.getInvitaMessage();
			this.fetchRecord(1);
		},
		data() {
			return {
				// 设置标题样式
				titleStyle: {
					fontWeight: '700', // 或者使用具体的数值如 '600', '700' 等
					fontSize: '32rpx', // 可选：调整字体大小
					color: 'rgba(0, 0, 0, 0.90)' // 可选：调整字体颜色
				},
				invitaMember: [],
				priceFilter: 0, //佣金筛选
				isRefreshing: false, //正在刷新
				loadingMore: false, //加载中
				noMoreData: false, //没有更多
				total: 0, //总数据量
				isEnd: false, // 是否全部加载完成
				page: 1,
				pageSize: 10,
				isShowStatusPopup: false,
				authStatus: null, //认证状态筛选
				level: 0,
				num: 0,
				totalFaceValue: 0,
				totalCommissionAmount: 0,
				isShow: uni.getStorageSync("isShow"),
			};
		},
		methods: {
			getAuthStatusText() {
				if (this.authStatus == null) {
					return "认证状态"
				} else {
					if (this.authStatus == 0) {
						return "未认证"
					} else {
						return "已认证"
					}
				}
			},
			showPop() {
				this.$app.toast("规则")
				this.$app.navTo("to-invita")
			},
			async getInvitaMessage() {
				const res = await this.$http({
					method: 'GET',
					url: '/user/invite/count',
				});

				if (res) {
					const message = res.data
					this.level = message.level
					this.num = message.num
					this.totalFaceValue = message.totalFaceValue
					this.totalCommissionAmount = message.totalCommissionAmount
				}
			},
			getLevelImg() {
				if (this.level == 1) {
					return "/static/images/ic_invita_0.png";
				} else if (this.level == 2) {
					return "/static/images/ic_invita_1.png";
				} else if (this.level == 3) {
					return "/static/images/ic_invita_2.png";
				} else if (this.level == 4) {
					return "/static/images/ic_invita_3.png";
				}
			},
			// 展示卡弹窗
			showStatusPopup() {
				this.isShowStatusPopup = true;
			},
			// 关闭卡弹窗
			closeStatusPop() {
				this.isShowStatusPopup = false;
			},
			// 选择状态值
			changeStatus(status) {
				console.log("当前状态值" + status)
				this.authStatus = status;
				this.closeStatusPop()
				this.onRefresh()
			},
			// 选择排序
			changeFilter() {
				if (this.priceFilter == 1) {
					this.priceFilter = 2
				} else {
					this.priceFilter = 1
				}
				// 去网络请求
				this.onRefresh()
			},
			onRefresh() {
				this.isRefreshing = true;
				this.resetPagination();
				this.fetchRecord(1);
			},
			// 清空状态
			resetPagination() {
				this.page = 1;
				this.invitaMember = [];
				this.loadingMore = false;
				this.noMoreData = false;
			},
			loadMore() {
				if (!this.loadingMore && !this.noMoreData) {
					this.loadingMore = true;
					this.page += 1;
					this.fetchRecord(2)
				}
			},
			// 请求邀请数据 states 0=初始化 1=刷新 2=加载
			async fetchRecord(states) {
				try {
					const res = await this.$http({
						method: 'GET',
						url: '/user/invite/list',
						data: {
							pageSize: this.pageSize,
							pageNum: this.page,
							status: this.authStatus,
							sortType: this.priceFilter == 0 ? "" : this.priceFilter
						}
					});

					//状态修改
					if (states == 1) {
						this.isRefreshing = false
					} else if (states == 2) {
						this.loadingMore = false;
					}

					// 首次加载
					if (this.page === 1) {
						this.invitaMember = res.rows
						this.total = res.total
					} else {
						// 追加数据
						this.invitaMember = [...this.invitaMember, ...res.rows]
					}

					// 判断是否加载完成
					this.isEnd = (this.page * this.pageSize) >= res.total

					// 翻页或加载到最后了
					if (!this.isEnd) {
						this.page++;
					} else {
						this.noMoreData = true;
					}
				} catch (error) {
					//TODO handle the exception
					if (states == 1) {
						this.isRefreshing = false
					} else if (states == 2) {
						this.loadingMore = false;
					}
				}

			},
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F7FAFF;
		height: 100vh;
	}

	.top-container {
		background-color: #487AFF;
		border-radius: 12rpx;
		margin: 32rpx 24rpx 30rpx 24rpx;
		padding: 22rpx 32rpx 22rpx 32rpx;
	}

	.top-container-text {
		color: white;
		font-size: 28rpx;
	}

	.filter-container {
		padding: 28rpx 38rpx;
		background-color: white;
		display: flex;
	}

	.member-container {
		margin: 16rpx 24rpx;
		background-color: white;
		border-radius: 12rpx;
		padding: 36rpx 28rpx 26rpx 36rpx;
		display: flex;
	}

	.filter-text {
		color: black;
		font-size: 28rpx;
		display: flex;
		align-items: center;

		&.active {
			color: #487AFF;
		}
	}

	// 加载更多
	.loading-more,
	.no-more-data {
		text-align: center;
		padding: 10px;
	}

	.popup-container {
		overflow: auto;
		padding: 32rpx 28rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 46rpx;
			margin-left: 24rpx;

			.title {
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
			}

			.close {
				height: 28rpx;
				width: 28rpx;
			}
		}

		.card-item-container {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #DCDCDC;
			border-radius: 14rpx;
			padding: 14rpx;
		}
	}
</style>